Skip to content

Conversation

@LFDanLu
Copy link
Member

@LFDanLu LFDanLu commented Mar 29, 2021

Closes #1705

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

LFDanLu added 7 commits March 25, 2021 16:53
…dits to textfield

changed show all menu items tracker to useState instead of ref
also fixing logic of when to open combobox if default items is empty vs controlled items + the filtered list provided is empty but user is updating with a unfiltered list via onMenuOpenManual
@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@LFDanLu
Copy link
Member Author

LFDanLu commented Mar 30, 2021

TODO: write docs example for how someone would go about changing controlled items on menu open (useListData example, async example?)

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@LFDanLu LFDanLu changed the title (WIP) Show all items when manually opening ComboBox menu Show all items when manually opening ComboBox menu Mar 31, 2021
@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

};

let triggerState = useMenuTriggerState({...props, onOpenChange});
let open = (focusStrategy?: FocusStrategy, showAllItems?: boolean, trigger?: MenuTriggerAction) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need both showAllItems and trigger here? Could trigger === 'manual' be used instead to determine whether to show all items?

Copy link
Member Author

@LFDanLu LFDanLu Apr 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figureed I would include both so that consumers of useComboBoxState wouldn't be forced into the "manual or focus trigger = show all items" logic, felt like this gives them more freedom to define what would get displayed and when for their own ComboBox implementations.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm not sure I follow. you mean if someone called comboBoxState.open() manually?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, or if someone wrote their own useComboBox but used our useComboBoxState and wanted their combobox not to show all items when opening the menu. They could then have something like this in their custom useComboBox hook:

let onKeyDown = (e: KeyboardEvent) => {
    switch (e.key) {
      case 'ArrowDown':
        state.open('first', false, 'manual');

meaning their default combobox behavior would be to only show the filtered collection at all times

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I think this may be providing too much flexibility. Seems like in that case maybe it would be preferable to add a prop to control the behavior for everyone equally. I guess if we decide to do that it would also solve this. For now, I think keeping the API simple is preferable.

shouldCloseOnBlur = true
} = props;

let [showAllItemsTracker, setShowAllItemsTracker] = useState(false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it a "tracker"?

Suggested change
let [showAllItemsTracker, setShowAllItemsTracker] = useState(false);
let [showAllItems, setShowAllItems] = useState(false);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Different name here because the open and toggle functions have showAllItems as a param. Maybe I could rename this to displayAllItems? I definitely could change this to showAllItems if I remove that parameter, but that's subject to the discussion in a previous comment

let menuOpenTrigger = useRef('focus' as MenuTriggerAction);
let onOpenChange = (open: boolean) => {
if (props.onOpenChange) {
props.onOpenChange(open, open ? menuOpenTrigger.current : undefined);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems a little hacky to use a ref for this... I guess the other option would be to not use menu trigger state at all and reimplement it and that seems possibly worse 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah def a bit hacky, but as you said the alternative would be to reimplement the open state logic from useMenuTriggerState+useOverlayTriggerState just so we can get onOpenChange to return the menu trigger action as well. I figured changing those hooks themselves to track menu trigger action was undesirable as well.

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@devongovett devongovett merged commit 8c55e67 into main Apr 21, 2021
@devongovett devongovett deleted the issue_1705 branch April 21, 2021 00:26
majornista pushed a commit to majornista/react-spectrum-v3 that referenced this pull request May 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show all options in combobox when opening

4 participants